import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { useParams } from 'react-router-dom';

import { postUpdated,selectPostById } from "./postsSlice";

import {
  useGetPostQuery,
  useEditPostMutation
} from '../api/apiSlice'

// const EditPostForm = () => {
//     const { postId } = useParams();

//   // const post = useSelector((state) =>
//   //   state.posts.find((post) => post.id === postId)
//   // );

//   const post = useSelector((state) => selectPostById(state, postId));

//   const [title, setTitle] = useState(post.title);
//   const [content, setContent] = useState(post.content);

//   const dispatch = useDispatch();
// //   const history = useHistory();
// const navigate = useNavigate();

//   const onTitleChanged = (e) => setTitle(e.target.value);
//   const onContentChanged = (e) => setContent(e.target.value);

//   const onSavePostClicked = () => {
//     if (title && content) {
//       dispatch(postUpdated({ id: postId, title, content }));
//       navigate(`/posts/${postId}`);
//     }
//   };

//   return (
//     <section>
//       <h2>编辑文章</h2>
//       <form>
//         <label htmlFor="postTitle">文章标题：</label>
//         <input
//           type="text"
//           id="postTitle"
//           name="postTitle"
//           placeholder="What's on your mind?"
//           value={title}
//           onChange={onTitleChanged}
//         />
//         <label htmlFor="postContent">内容：</label>
//         <textarea
//           id="postContent"
//           name="postContent"
//           value={content}
//           onChange={onContentChanged}
//         />
//       </form>
//       <button type="button" onClick={onSavePostClicked}>
//         保存文章
//       </button>
//     </section>
//   );
// };


const EditPostForm = () => {
  const { postId } = useParams();
  //const post = useSelector((state) => selectPostById(state, postId));
  const { data: post } = useGetPostQuery(postId);
  const [updatePost,{isLoading}] = useEditPostMutation();

  const [title, setTitle] = useState(post.title);
  const [content, setContent] = useState(post.content);

  //const dispatch = useDispatch();
  //   const history = useHistory();
  const navigate = useNavigate();

  const onTitleChanged = (e) => setTitle(e.target.value);
  const onContentChanged = (e) => setContent(e.target.value);

  const onSavePostClicked = async () => {
    if (title && content) {
      //dispatch(postUpdated({ id: postId, title, content }));
      await updatePost({ id: postId, title, content });
      navigate(`/posts/${postId}`);
    }
  };

  return (
    <section>
      <h2>编辑文章</h2>
      <form>
        <label htmlFor="postTitle">文章标题：</label>
        <input
          type="text"
          id="postTitle"
          name="postTitle"
          placeholder="What's on your mind?"
          value={title}
          onChange={onTitleChanged}
        />
        <label htmlFor="postContent">内容：</label>
        <textarea
          id="postContent"
          name="postContent"
          value={content}
          onChange={onContentChanged}
        />
      </form>
      <button type="button" onClick={onSavePostClicked}>
        保存文章
      </button>
    </section>
  );
};

export default EditPostForm;